<template>
  <MainLayout>
    <section class="forum-header">
      <div class="container">
        <div class="forum-header-title">功能强大的3D设计工作平台</div>
        <div class="forum-header-content">基于浏览器，无代码，实时渲染<br />重塑3D内容的创建和分发方式</div>
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/register')">注册</div>
        </div>
      </div>
    </section>

    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/work/car.jpg" alt="" />
      </div>
    </section>

    <!-- 在设计模式下启动您的项目 -->
    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">在设计模式下启动您的项目</div>
        <div class="threeD-description">
          AnyRender是一个满足您所有需求的强大工具。设置场景，创建或导入3D资产，调整材料并添加交互式元素。
        </div>
      </div>
    </section>
    <section class="work-section">
      <div class="container">
        <div class="work-content">
          <div class="work-content-item" v-for="item in workList" :key="item.title">
            <div class="work-content-item-title">{{ item.title }}</div>
            <div class="work-content-item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">在任何设备上获得逼真的渲染</div>
        <div class="threeD-description">
          编辑项目时即时视觉反馈。我们的图形渲染器经过优化，可在从移动设备到智能眼镜的任何设备上运行，并具有高质量的输出。
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/work/head.jpg" alt="" />
      </div>
    </section>
    <section class="work-section">
      <div class="container">
        <div class="work-content">
          <div class="work-content-item" v-for="item in deviceList" :key="item.title">
            <div class="work-content-item-title">{{ item.title }}</div>
            <div class="work-content-item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>

    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">产生出色的动画和互动体验</div>
        <div class="threeD-description">
          无需编码，无需API。通过合并来转换您的3D模型<br />动画、过渡，甚至点击和基于操作的交互进入您的设计。
        </div>
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/seek/interact')">了解更多关于互动和动画的信息</div>
        </div>
      </div>
    </section>
    <section class="img-section">
      <div class="container">
        <img class="img-section-img" src="/images/work/dianzi.jpg" alt="" />
      </div>
    </section>
    <section class="work-section">
      <div class="container">
        <div class="work-content">
          <div class="work-content-item" v-for="item in experienceList" :key="item.title">
            <div class="work-content-item-title">{{ item.title }}</div>
            <div class="work-content-item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 为输出做准备 -->
    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">为输出做准备</div>
        <div class="threeD-description">
          提高了3D显示器的性能。AnyRender提供了优化和缩小3D场景大小的工具，同时保持其质量。
        </div>
      </div>
    </section>
    <section class="work-section">
      <div class="container">
        <div class="work-content">
          <div class="work-content-item" v-for="item in prepareList" :key="item.title">
            <div class="work-content-item-title">{{ item.title }}</div>
            <div class="work-content-item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- 一个链接，我们分享方式的根本性转变 -->
    <section class="threeD-section">
      <div class="container">
        <div class="threeD-title">一个链接，我们分享方式的根本性转变</div>
        <div class="threeD-description">
          让自己摆脱大型文件传输和延迟。从任何设备共享和访问项目。立即查看更改。AnyRender中的共享选项旨在节省时间、团结团队并消除压力。
        </div>
        <div class="find-btn">
          <div class="find-btn-txt" @click="jump('/seek/shareImplant')">了解更多关于3D文件共享和嵌入的信息</div>
        </div>
      </div>
    </section>
    <section class="share-section">
      <div class="container">
        <div class="share-content">
          <div class="share-content-item" v-for="item in shareList" :key="item.title">
            <div class="share-content-item-title">{{ item.title }}</div>
            <div class="share-content-item-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>

    <section class="img-section">
      <div class="container">
        <img class="img-section-img cursor" src="/images/work/zhuce.jpg" alt="" @click="jump('/register')" />
      </div>
    </section>
  </MainLayout>
</template>

<script setup>
  import { useRouter } from "vue-router";
  const router = useRouter();
  // 工作列表
  let workList = [
    {
      title: "创建你自己的模型",
      desc: "使用网格建模来设计以创建您自己的3D对象使用修改和变形器来扩展可能性。",
    },
    {
      title: "随时随地使用内容",
      desc: "只需简单的拖放，即可从AnyRender库中导入各种2D和3D文件或现成的对象。",
    },
    {
      title: "量身定制到完美",
      desc: "采用功能齐全的3D编辑器来添加、更改、优化和自定义您的设计、材料、环境。",
    },
  ];

  // 设备列表
  let deviceList = [
    {
      title: "环境",
      desc: "使用环境的预设或上传您自己的预设，无论您是需要现实生活中的设置还是风格化的工作室灯以获得更艺术的输出。",
    },
    {
      title: "照明设备",
      desc: "在场景中应用作为3D物体的灯光，或使用发射材料设置将任何物体变成光源。",
    },
    {
      title: "后期处理",
      desc: "通过使用抗锯齿、绽放、反射、软阴影等高级效果，让您的3D设计看起来更精致。",
    },
    {
      title: "PBR材料",
      desc: "使用我们的材料库实现逼真的渲染和嵌入。PBR标准提供高质量的视觉效果。",
    },
    {
      title: "先进的材料",
      desc: "使用透明涂层、薄膜、折射、地下散射或环境遮挡来获得专业的表面处理。",
    },
    {
      title: "动画纹理",
      desc: "将任何Lottie或Gif转换为动画纹理。释放全新的创意潜力，让您的3D演示更具吸引力。",
    },
  ];

  // 体验
  let experienceList = [
    {
      title: "轻松制作具有明确目标的用户界面",
      desc: "提供定制信息和CTA，或邀请用户参与完全可定制的浮动元素和热点，以在颜色和材料之间进行更改，展示变化和模块化。",
    },
    {
      title: "轻松解释复杂的想法和设计",
      desc: "定义操作以传递有用的消息和连接。让用户直接参与设计，以发现多层信息、自定义或查看完整的颜色/材料选项集合。",
    },
    {
      title: "为您的内容添加一些操作",
      desc: "使用动画绘制操作，以披露信息，展示模块化组件，并为您的设计添加上下文。添加触发器、过渡并修改速度。您的设计不仅会提供清晰度，还会提供功能性。",
    },
  ];

  // 准备工作列表
  let prepareList = [
    {
      title: "场景分析器",
      desc: "运行即时诊断测试，以识别潜在的性能问题，并接收改进建议。",
    },
    {
      title: "优化工具",
      desc: "无论是需要减少的多边形数量，还是纹理太大，使用内置工具，解决问题都很容易。",
    },
    {
      title: "烘焙",
      desc: "创建详细的高质量视觉效果，同时保持3D文件小。每个产品展示的必备品。",
    },
    {
      title: "增强现实",
      desc: "通过将3D对象从任何设备放入物理世界来创造身临其境的体验。在几秒钟内准备好3D项目AR。",
    },
    {
      title: "导出3D文件",
      desc: "需要在其他软件中使用您的3D设计吗？下载STL、OBJ、DAE、GLB、GLTF、USDZ、FBX，您就可以出发了。",
    },
    {
      title: "下载渲染",
      desc: "在一秒钟内获取渲染的高分辨率jpg文件。没有等待时间。只需选择最佳角度，然后单击下载按钮。",
    },
  ];

  // 分享列表
  let shareList = [
    {
      title: "发送一个链接",
      desc: "在聊天中发送一个链接或消息，点击后将直接打开3D项目。添加评论，甚至将其添加为书签以供参考。",
    },
    {
      title: "嵌入任何地方",
      desc: "AnyRender使用一个链接在任何地方（聊天、网站、演示等）嵌入，或在支持它的工具中使用嵌入代码。",
    },
  ];

  function jump(path) {
    router.push(path);
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .forum-header {
    padding: 48px 0;

    .container {
      .forum-header-title {
        font-size: 64px;
        font-weight: 500;
        color: #000;
        line-height: 1.6;
        text-align: center;
        letter-spacing: 3px;
      }
      .forum-header-content {
        margin: 20px auto;
        width: 50%;
        line-height: 1.6;
        text-align: center;
        font-size: 16px;
        color: #585858;
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .forum-header-title {
          font-size: 50px;
          letter-spacing: 2px;
        }
      }
    }
    // 响应式 平板
    @media (max-width: $breakpoint-tablet) {
      padding: 32px 0;
      .container {
        .forum-header-title {
          font-size: 38px;
          letter-spacing: 1px;
        }
        .forum-header-content {
          margin-top: 20px;
          font-size: 14px;
          width: 80%;
        }
      }
    }
    // 响应式 手机
    @media (max-width: $breakpoint-mobile) {
      padding: 24px 0;
      .container {
        .forum-header-title {
          font-size: 32px;
        }
      }
    }
  }

  .find-btn {
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .find-btn-txt {
      display: inline-block;
      text-align: center;
      padding: 8px 20px;
      min-width: 60px;
      font-size: 16px;
      border-radius: 6px;
      color: #fff;
      background-color: #703ffa;
      border: 1px solid #703ffa;
      cursor: pointer;
      &:hover {
        background-color: transparent;
        color: #703ffa;
      }
    }

    @media (max-width: $breakpoint-mobile) {
      margin: 20px auto;
      .find-btn-txt {
        margin: 20px auto;
        padding: 4px 20px;
        min-width: 100px;
        font-size: 14px;
      }
    }
  }

  .img-section {
    padding: 20px 0 40px;
    .container {
      .img-section-img {
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        object-fit: cover;
        box-shadow: 2px 4px 8px 8px rgba(0, 0, 0, 0.05);
        &.cursor {
          cursor: pointer;
        }
      }
    }
  }

  .threeD-section {
    padding: 40px 0;
    color: #000;
    text-align: center;
    .container {
      .threeD-title {
        font-size: 48px;
        font-weight: 500;
        letter-spacing: 4px;
      }
      .threeD-description {
        width: 90%;
        margin: 20px auto;
        font-size: 16px;
        line-height: 24px;
        color: #585858;
      }
      .find-btn-txt {
        color: #703ffa;
        background-color: transparent;
        &:hover {
          background-color: #703ffa;
          color: #fff;
        }
      }

      // 响应式 电脑
      @media (max-width: $breakpoint-desktop) {
        .threeD-title {
          font-size: 36px;
          letter-spacing: 3px;
        }
        .threeD-description {
          font-size: 16px;
        }
      }
      // 响应式 平板
      @media (max-width: $breakpoint-tablet) {
        .threeD-title {
          font-size: 32px;
          letter-spacing: 2px;
        }

        .threeD-description {
          width: 100%;
          font-size: 16px;
        }
      }
      // 响应式 手机
      @media (max-width: $breakpoint-mobile) {
        .threeD-title {
          font-size: 28px;
        }

        .threeD-description {
          font-size: 14px;
        }
      }
    }
  }

  .work-section {
    padding: 40px 0;
    .container {
      .work-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 40px;
        .work-content-item {
          width: calc(33.33% - 40px);
          .work-content-item-title {
            font-size: 30px;
            font-weight: 500;
            margin-bottom: 30px;
          }
          .work-content-item-desc {
            font-size: 16px;
            color: #585858;
            margin-bottom: 20px;
          }
        }
      }
    }
    // 响应式 大屏幕
    @media (max-width: $breakpoint-large-desktop) {
      .container {
        .work-content {
          gap: 20px;
          .work-content-item {
            width: calc(33.33% - 20px);
            .work-content-item-title {
              font-size: 24px;
            }
          }
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .work-content {
          gap: 30px;
          .work-content-item {
            width: 100%;
          }
        }
      }
    }
  }

  .share-section {
    padding: 40px 0;
    .container {
      .share-content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 40px;
        .share-content-item {
          width: calc(50% - 40px);
          .share-content-item-title {
            font-size: 30px;
            font-weight: 500;
            margin-bottom: 30px;
          }
          .share-content-item-desc {
            font-size: 16px;
            color: #585858;
            margin-bottom: 20px;
          }
        }
      }
    }
    // 响应式 大屏幕
    @media (max-width: $breakpoint-large-desktop) {
      .container {
        .share-content {
          .share-content-item {
            .share-content-item-title {
              font-size: 24px;
            }
          }
        }
      }
    }
    // 响应式 电脑
    @media (max-width: $breakpoint-desktop) {
      .container {
        .share-content {
          gap: 30px;
          .share-content-item {
            width: 100%;
          }
        }
      }
    }
  }
</style>
